<template>
  <div class="box-card" shadow="never">
    <!-- <el-table max-height="600" ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]" row-key="batchId"
      @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
      highlight-current-row @current-change="handleCurrentChange" :header-cell-style="{ background: '#c8e2ff' }"> -->

    <el-table max-height="600" ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]" row-key="batchId"
      @select="crud.selectChange" @select-all="crud.selectAllChange" highlight-current-row
      @current-change="handleCurrentChange" @selection-change="change" :header-cell-style="{ background: '#c8e2ff' }">
      <!-- patientId -->
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column prop="applyTime" label="开单时间" :formatter="formatDate" />
      <el-table-column prop="patientName" label="姓名">
        <template slot-scope="scope">
          <div class="name">
            <div class="background_style" v-if="scope.row.newFlag == 1">
              新
            </div>
            <span> {{ scope.row.patientName }} </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="patientType" label="类型">
        <template slot-scope="scope">
          {{ getType(scope.row.patientType) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="bedNum" label="床号" />
      <el-table-column prop="admissionNum" label="住院号" />
      <el-table-column prop="outpatientNum" label="门诊号" /> -->
    </el-table>
    <el-pagination style="margin-top: 8px" :page-size.sync="crud.page.size" :page-sizes="[10, 20, 30, 50]"
      :total="crud.page.total" :current-page.sync="crud.page.page" layout="total, prev, pager, next, sizes"
      @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" :pager-count="5" small />
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import moment from "moment";
const defaultForm = {
  date: [],
  applyTimeBegin: "",
  applyTimeEnd: "",
  departmentCode: null,
  exeStates: null,
  patientType: null,
  hyperbaricOxygenStates: null,
  patientName: null,
  myStates: false,
};
export default {
  name: "appLeft",
  cruds() {
    return CRUD({
      title: "治疗预约",
      url: "admin/reservation/patient/list",
      optShow: {
        reset: false,
        add: true,
        edit: false,
        del: false,
        download: false,
        opts: true,
      },
      idField: "patientId",
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      currentRow: null,
      departmentList: [],
      typeList: [
        {
          label: "门诊",
          value: 1,
        },
        {
          label: "住院",
          value: 2,
        },
        {
          label: "其他",
          value: 3,
        },
      ],
    };
  },
  watch: {
    activeRow: function (val, oldVal) {
      this.currentRow = val;
    },
  },
  mounted() {

  },
  methods: {
    change(data = []) {
      // this.$BUS.$emit('batch', !!data.length);
      this.$BUS.$emit('batch', data);
    },
    setSelectTableRow(val) {
      this.$refs.table.setCurrentRow(val);
    },
    setAllList(val) {

      this.crud.query = {
        ...val,
        myStates: val.myStates ? 1 : 0,
      };
      this.crud.toQuery();
      setTimeout(() => {
        if (this.crud.data.content && this.crud.data.content.length > 0) {
          this.setSelectTableRow(this.crud.data.content[0]);
          this.$emit("changeItemList", this.crud.data.content[0]);
        } else {
          // this.$emit("changeItemList");
        }
      }, 500);
    },
    getType(val) {
      let obj = this.typeList.find((item) => {
        return item.value == val;
      });
      return obj ? obj.label : "";
    },
    getTime(val) {
      return val ? moment(val).format("YYYY-MM-DD HH:mm") : "";
    },
    //当前页改变
    pageChangeHandler(e) {
      this.crud.page.page = e;
      this.crud.refresh();
      setTimeout(() => {
        if (this.crud.data.content && this.crud.data.content.length > 0) {
          this.setSelectTableRow(this.crud.data.content[0]);
        }
      }, 500);
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.crud.page.size = e;
      this.crud.page.page = 1;
      this.crud.refresh();
      setTimeout(() => {
        if (this.crud.data.content && this.crud.data.content.length > 0) {
          this.setSelectTableRow(this.crud.data.content[0]);
        }
      }, 500);
    },
    handleCurrentChange(val) {
      this.$emit("change", val);
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (crud.data && crud.data.content && crud.data.content.length) {
        if (this.currentRow) {
          const existRow = crud.data.content.find(
            (row) => row.patientId === this.currentRow.patientId
          );
          if (!existRow) {
            this.$emit("change", crud.data.content[0]);
          }
        } else {
          this.$emit("change", crud.data.content[0]);
        }
      }
    },
    formatDate(row, column, cellValue, index) {
      if (cellValue) {
        const date = new Date(cellValue);
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        const hours = ('0' + date.getHours()).slice(-2);
        const minutes = ('0' + date.getMinutes()).slice(-2);
        const seconds = ('0' + date.getSeconds()).slice(-2);
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      return '';
    }
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: -3px 0px 5px #00000059;
}

/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container {
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
  }
}

.name {
  position: relative;

  .background_style {
    position: absolute;
    right: -38px;
    transform: rotate(45deg);
    width: 76px;
    height: 16px;
    background: #fcb54c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #fff;
  }
}

/deep/.el-pagination .el-select .el-input .el-input__inner {
  height: 22px;
}
</style>
